<!-- 
  在 qm-modal 组件的基础之上再做一层包装，不需要手动控制弹窗的显示和隐藏

  用法：
    <qm-modal-button path="/admin/sysMenu/list" title="资源管理">测试button</qm-modal-button>
  
-->
<template>
  <el-button
    :size="size"
    :type="type"
    :plain="plain"
    :round="round"
    :circle="circle"
    :loading="loading"
    :disabled="disabled"
    :icon="icon"
    :autofocus="autofocus"
    :params="params"
    @click="open"
  >
    <slot></slot>
    <qm-modal
      v-model="modalVisible"
      :path="path"
      :resize="resize"
      :width="width"
      :height="height"
      :title="title"
      :showFooter="showFooter"
      @modal-close="close"
    >
      <template v-slot:footer>
        <slot name="footer"></slot>
      </template>
    </qm-modal>
  </el-button>
</template>

<script>
import _ from "lodash";

export default {
  name: "qm-modal-button",
  props: {
    size: {
      type: String,
      default: "small",
    },
    type: {
      type: String,
      default: "primary",
    },
    plain: {
      //是否朴素按钮
      type: Boolean,
      default: false,
    },
    round: {
      //是否圆角按钮
      type: Boolean,
      default: false,
    },
    circle: {
      //是否圆形按钮
      type: Boolean,
      default: false,
    },
    loading: {
      //是否加载中状态
      type: Boolean,
      default: false,
    },
    disabled: {
      //是否禁用状态
      type: Boolean,
      default: false,
    },
    icon: {
      type: String,
    },
    autofocus: {
      //是否默认聚焦
      type: Boolean,
      default: false,
    },
    showFooter: {
      //是否默认聚焦
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      required: true,
    },
    path: {
      type: String,
      required: true,
    },
    resize: {
      type: Boolean,
      default: true,
    },
    width: {
      type: Number,
      default: 1024,
    },
    height: {
      type: Number,
      default: 600,
    },
    params: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      modalVisible: false,
      opening: false,
    };
  },
  methods: {
    open() {
      //防止事件冒泡
      if (!this.opening) {
        this.modalVisible = true;
        this.opening = true;
      }
    },
    close() {
      this.modalVisible = false;
      this.opening = false;
      this.$emit("modal-close");
    },
  },
};
</script>

<style>
</style>
